import React, { Component, ComponentClass } from 'react';
import Taro from '@tarojs/taro';
import {View, Text, Picker, Image, Block} from '@tarojs/components'
import {AtIcon, AtDrawer} from 'taro-ui';
import {vcmonitor} from "../../utils/tools";
import Screen from "../components/screen/screen";
import {
  MARKETPERFORMANCE_APP_ALL_SITE,
  DB_CHECK_ORDER_LIST,
  RESOURCE_URL,
  MARKETPERFORMANCE_APP_ALL_BD
} from '../../constants/api'
import GzhAuth from "../../components/gzh-auth/gzh-auth";
import {http} from "../../utils/http";
import Water from "../components/water-mark/index";
import './writeOffStatistics.scss'

type PageOwnProps = {};
type PageState = {
  dataList: any
  drawerShow: boolean
  options: object
  formData: any
}

class Index extends Component {
  state: PageState = {
    drawerShow: false,
    options: [
      {
        title: '站点',
        type: 'tag',
        key: 'tag',
        active: 0,
        data: []
      },
      {
        title: '市场人员姓名',
        type: 'tag',
        key: 'bn_id',
        active: 0,
        data: []
      },
      {
        title: '商品',
        type: 'input',
        placeholder: '请输入要搜索的商品名称',
        key: 'product_name'
      }
    ],
    formData: {
      page: 1,
      length: 10,
      draw: 1,
      endDate: '',
      startDate: ''
    },
    dataList: []
  }

  async componentDidShow() {
    vcmonitor(this)
    const siteRes = await http.HGet(MARKETPERFORMANCE_APP_ALL_SITE, {})
    if (siteRes) {
      let {options} = this.state
      options = options || [];
      options[0].data = []
      options[1].data = []
      this.setState({options});
    }
    await this.getData()
  }

  async onReachBottom() {
    const {formData, dataList} = this.state
    if (formData['page'] * 10 < this.recordsTotal) {
      formData['page'] = formData['page'] + 1
      this.setState({formData}, async () => {
        const res = await http.HPost(DB_CHECK_ORDER_LIST, formData);
        this.recordsTotal = res.recordsTotal || 0
        if (res) {
          this.setState({dataList: [...dataList, ...res.data]});
        }
      })
    }
  }

  recordsTotal

  async getData() {
    const {formData} = this.state;
    Taro.showLoading({title: '加载中...'});
    const res = await http.HPost(DB_CHECK_ORDER_LIST, formData);
    this.recordsTotal = res.recordsTotal || 0
    if (res) {
      this.setState({dataList: res.data});
    }
    const siteRes = await http.HGet(MARKETPERFORMANCE_APP_ALL_SITE, this.state.formData);
    if (siteRes) {
      const {options} = this.state;
      options[0].data = siteRes.data;
      this.setState({options});
    }
    const bdRes = await http.HGet(MARKETPERFORMANCE_APP_ALL_BD, this.state.formData);
    if (bdRes) {
      const {options} = this.state;
      options[1].data = bdRes.data;
      this.setState({options});
    }
    Taro.hideLoading();
  }

  // 开始时间
  changeStart(date) {
    const formData = this.state.formData;
    const options = this.state.options;
    formData.startDate = date;
    // 筛选数据返回
    this.setState({
      formData,
      options
    }, async () => {
      await this.getData()
    });
  }

  // 结束时间
  changeEnd(date) {
    const formData = this.state.formData;
    const options = this.state.options;
    formData.endDate = date;
    formData['page'] = 1;
    // 筛选数据返回
    this.setState({
      formData,
      options
    }, async () => {
      await this.getData()
    });
  }

  // 关闭筛选
  setDrawer(drawerShow) {
    this.setState({
      drawerShow
    });
  }

  // 监听抽屉返回数据
  screenChange(v, k, i) {
    const formData: any = this.state.formData;
    const options = this.state.options;
    if (k === 'tag') {
      formData.search_sid = v;
    }
    if (k === 'bn_id') {
      formData.search_bd_id = v;
    }
    if (k === 'product_name') {
      formData.search_product_name = v;
    }
    if (k == 'tag') {
      options[i].active = v;
    }
    if (k == 'bn_id') {
      options[i].active = v;
    }
    // 筛选数据返回
    this.setState({
      formData,
      options
    });
  }

  render() {
    const {drawerShow, options, formData, dataList}: any = this.state;
    return (
      <View className='vedrifcation'>
        <GzhAuth />
        <Water />
        <View>
          <View className='product-item-right t-a-l flex'>
            <Picker
              mode='date'
              onChange={
                ({detail: {value}}) => this.changeStart(value)
              }
              value={formData.startDate}
              className='flex-3'
            >
              <View className='product-item-right f-j-c f-26 w-100 p-r-0'
                style={`color:${formData.startDate ? '#000' : '#c5c5c5'};`}
              >
                {formData.startDate || '选择时间'}
              </View>
            </Picker>
            <View className='product-item-right p-a f-s-26'>至</View>
            <Picker
              mode='date'
              onChange={
                ({detail: {value}}) => this.changeEnd(value)
              }
              value={formData.endDate}
              className='flex-3'
            >
              <View className='product-item-right f-j-c f-26 w-100 p-r-0'
                style={`color:${formData.endDate ? '#000' : '#c5c5c5'};`}
              >
                {formData.endDate || '选择时间'}
              </View>
            </Picker>
          </View>
          <View className='select'>
            <AtIcon size='14' value='icon icon-shaixuan-01' className='m-r-10' />
            <Text className='select-text' onClick={() => this.setDrawer(true)}>
              筛选
            </Text>
          </View>
          {dataList && dataList.length > 0 && <View className='list'>
            {
              dataList.map(item => {
                return (
                  <Block key={item.id}>
                    <View className='list-item'>
                      <View className='list-item-header'>
                        <View className='list-item-header-left'>
                          <View className='list-item-header-left-image'>
                            <Image src={item.img} style='width:100% ; height:100%' />
                          </View>
                        </View>
                        <View className='list-item-header-right'>
                          <View className='list-item-header-right-name'>
                            {item.product_name}
                          </View>
                          <View className='list-item-header-right-index'>
                            编号：{item.goods_no}
                          </View>
                          <View className='list-item-header-right-position'>
                            <AtIcon size='12' value='icon-a-2tubiaozhizuomoban-011' className='m-r-10' />
                          </View>
                        </View>
                      </View>
                      <View className='list-item-count'>
                        核销数：<Text className='count'>{item.sum_check_num}</Text>
                      </View>
                    </View>
                  </Block>
                )
              })
            }
          </View>
          }
          {dataList.length <= 0 && <View className='listNull'>
            <Image src={`${RESOURCE_URL}/upload/images/20211112/1636708674979_153.png`} mode='widthFix' />
            <View className='text'>暂无数据</View>
          </View>}
        </View>
        <View style='height: 30px;' />
        <AtDrawer
          show={drawerShow}
          mask
          onClose={this.setDrawer.bind(this, false)}
          right
        >
          <Screen
            options={options}
            onChange={this.screenChange.bind(this)}
          />
          <View className='sure-btn-fixed' onClick={async () => {
            formData['page'] = 1
            this.setState({formData}, async () => {
              await this.getData()
              this.setState({drawerShow: false})
            })
          }}
          >确定</View>
        </AtDrawer>
      </View>
    );
  }
}

export default Index as ComponentClass<PageOwnProps, PageState>
